<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSS基本语法</title> 
<style>
div.parent{
    width:300px;
    border:6px solid red;
    display:flow-root;
}
div.float-left{
    width:100px;
    height:110px;
    background: green;
    float:left;
}
div.float-right{
    width:100px;
    height:120px;
    background: orange;
    float:right;
    
}
div.float-none{
    background: lime;
    border:6px solid blue;
    height:80px;
}
.clear{
    clear:both;
    /*以下3句用于不让IE浏览器产生多余的空间*/
    height:0;
    line-height: 0;
    font-size:0;
}

</style>
</head>
<body>
   <div class="parent">
       <div class="float-left"></div>
       <div class="float-right"></div>
       <div class="float-none"></div>
       <!--<div class="clear"></div> 使用clear来清除float-->
   </div>
</body>
</html>

